<template>
  <div class='seller-container'>
    <el-row>
      <el-col :span="24"
              class="seller-top">
        项目招标信息
      </el-col>
      <el-col :span="24"
              class="seller-table-main">
        <el-col :span="24">
          <el-col :span="4">
            <div class="seller-btn">
              <el-button type="primary"
                         size="medium"
                         @click="linkToRelease">发布招标</el-button>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="seller-btn">
              <span>招标项</span>
              <el-input class="search-input"
                        v-model="sellerParams.contract_name"
                        placeholder="请输入招标项名称"></el-input>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="seller-btn">
              <span>发布时间</span>
              <el-date-picker class="search-date"
                              v-model="startTime"
                              @change="start(startTime)"
                              type="daterange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </el-col>
          <el-col :span="4"
                  align="right">
            <el-button type="primary"
                       @click="search()">查询</el-button>
            <el-button @click="reset()">重置</el-button>
          </el-col>
        </el-col>
        <div class="table-box">
          <el-table :highlight-current-row='true'
                    :data='projectTable.list'
                    @row-click="getRowData"
                    :header-cell-style="{background:'#f5f5f5'}">
            <el-table-column prop='contract_name'
                             label='招标项'
                             align='left'
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column align="center"
                             width="170px">
              <template slot="header"
                        slot-scope="scope">
                <el-select value-key="value"
                           class="state-select"
                           placeholder="项目状态"
                           @change="changeProjectState()"
                           v-model="sellerParams.status">
                  <el-option v-for="(item) in sellerStateList"
                             :key="item.value"
                             :label="item.name"
                             :value="item.value">
                  </el-option>
                </el-select>
              </template>
              <template slot-scope="scope">
                <span>{{scope.row.status=='1'?'招标中':'已结束'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop='max_amount'
                             label='招标控制价(万)'
                             align='center'
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop='bid_num'
                             label='投标单位数量'
                             align='center'
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column align='center'
                             width="170px">
              <template slot="header"
                        slot-scope="scope">
                <el-select value-key="value"
                           class="state-select"
                           placeholder="发布时间"
                           @change="changeReleaseTime()"
                           v-model="sellerParams.release_time">
                  <el-option v-for="(item) in TimeList"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </template>
              <template slot-scope="scope">
                <span>{{scope.row.created_at}}</span>
              </template>
            </el-table-column>
            <el-table-column label='项目信息'
                             align='center'>
              <template slot-scope="scope">
                <el-button type="text"
                           @click="detailDialogVisible=true,getSellerDialogInfo(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination @current-change='sellerPageChange'
                       :current-page='sellerParams.page'
                       :page-size='sellerParams.per_page'
                       :page-sizes="[10]"
                       layout='total, sizes,prev, pager, next, jumper'
                       :total='projectTable.total_count'
                       align='center'>
        </el-pagination>
        <!-- 项目详情弹窗 -->
        <el-dialog title="项目信息"
                   :visible.sync="detailDialogVisible"
                   width="60%"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   class="project-dialog">
          <p class="project-company-title">{{ruleForm.company_name}}</p>
          <p class="project-company-name">{{ruleForm.contract_name}}</p>
          <div class="project-company-table">
            <el-table :highlight-current-row='true'
                      height="300"
                      :header-cell-style="{background:'#f5f5f5'}"
                      :data='ruleForm.list'>
              <el-table-column label='序号'
                               align='center'
                               show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.$index+1}}</span>
                </template>
              </el-table-column>
              <el-table-column prop='resolve_no'
                               label='项目编号'
                               align='center'
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop='wbs_name'
                               label='项目wbs'
                               align='center'
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop='aspect'
                               label='特征'
                               align='center'
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop='unit'
                               label='计量单位'
                               align='center'
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop='number'
                               label='工程数量'
                               align='center'
                               show-overflow-tooltip>
              </el-table-column>
            </el-table>
          </div>
          <div class="project-company-footer">
            <div class="seller-company-title">资质要求：</div>
            <div class="content">{{ruleForm.qual_info}}</div>
            <div class="seller-company-title">工程量描述：</div>
            <div class="content">{{ruleForm.load_info}}</div>
            <div class="seller-company-title">招标控制价(万元)：</div>
            <div class="content">{{ruleForm.max_amount}}</div>
          </div>
        </el-dialog>
      </el-col>
      <el-col :span="24"
              class="left-seller-detail"
              align="left">
        <el-radio-group v-model="tabPosition"
                        @change="changeRadio">
          <el-radio-button :label="item.name"
                           v-for="(item) in StateList"
                           :key="item.value"></el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="24"
              class="contract-seller-detail">
        <div class="table-box">
          <el-table :highlight-current-row='true'
                    :header-cell-style="{background:'#f5f5f5'}"
                    :data='unitTable.list'>
            <el-table-column prop='company_name'
                             label='投标单位'
                             align='left'
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop='create_user_name'
                             label='投标联系人'
                             align='center'
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop='phone'
                             label='联系电话'
                             align='center'
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column label='操作'
                             align='center'>
              <template slot-scope="scope">
                <el-button type="text"
                           v-if="false"
                           :disabled="scope.row.status=='3'?false:true">查看标书</el-button>
                <el-button type="text"
                           @click="bidDialogVisible = true,sellerInfo=scope.row.company_name,getId(scope.row)"
                           :disabled="rowState=='1'?false:true">{{rowState=='1'?'确认中标':scope.row.status=='4'?'已中标':'未中标'}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 确定中标弹窗 -->
        <el-dialog title="确定中标"
                   :visible.sync="bidDialogVisible"
                   width="30%"
                   :show-close="false"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   class="bid-dialog">
          <div class="dialog-title">您确定选择：</div>
          <div class="dialog-content">【<span>{{sellerInfo}} </span>】<span class="normal-span">中标？</span></div>
          <span slot="footer"
                class="dialog-footer footer-span">
            <el-button @click="bidDialogVisible = false">取 消</el-button>
            <el-button type="primary"
                       @click="sureSeller()">确 定</el-button>
          </span>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import { SellerMarketApi } from '@/services/ResourceCentre'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  data () {
    return {
      tabPosition: '全部',
      Seller: {
        page: 1,
        page_size: 10
      },
      startTime: '',
      // requestParam: {
      //   page: 1,
      //   page_size: 10
      // },
      projectTable: {
        list: [],
        total_page: 0,
        total_count: 0
      },
      sellerStateList: [],//招标状态
      TimeList: [{
        value: 'Desc',
        label: "最新"
      }, {
        value: 'Asc',
        label: "降序"
      }],
      invite_bid_id: "",//项目招标id
      detailDialogVisible: false,//项目详情弹窗
      ruleForm: {
        list: [],
        qual_info: "",
        load_info: "",
        max_amount: ""
      },
      unitTable: {
        list: [],
        total_count: 0,
        total_page: 0,
      },
      unitParams: {
        page: 1,
        per_page: 10,
        bid_invite_id: "",
        status: ""
      },
      StateList: [],
      sellerInfo: "",
      inviteId: "",
      joinId: "",
      bidDialogVisible: false,
      project_id: "",
      rowState: "",
      rowData: {},
      sellerParams: {
        page: 1,
        per_page: 10,
        project_id: this.$route.query.project_id,
        release_time: "",
        status: "",
        contract_name: "",
        created_at_greater: "",
        created_at_less: ""
      }
    }
  },
  methods: {
    linkToRelease () {
      this.$router.push({ path: '/releaseSeller', query: { project_id: this.project_id } })
    },
    //获取时间选择器的时间
    start (data) {
      if (!data) {
        this.sellerParams.created_at_greater = ''
        this.sellerParams.created_at_less = ''
      } else {
        var stime = new Date(data[0])
        var y = stime.getFullYear();
        var m = stime.getMonth() + 1;
        var d = stime.getDate();
        var start = y + '-' + m + '-' + d
        this.sellerParams.created_at_greater = start
        //上传结束时间
        var stime_end = new Date(data[1])
        var y = stime_end.getFullYear();
        var m = stime_end.getMonth() + 1;
        var d = stime_end.getDate();
        var start_end = y + '-' + m + '-' + d
        this.sellerParams.created_at_less = start_end
      }
    },
    //查询功能
    search () {
      this.sellerParams.page = 1
      this.sellerPageChange(this.sellerParams.page)
    },
    //重置按钮功能
    reset () {
      this.sellerParams.status = ""
      this.sellerParams.release_time = ""
      this.sellerParams.contract_name = ""
      this.sellerParams.created_at_greater = ""
      this.sellerParams.created_at_less = ""
      this.sellerParams.page = 1
      this.startTime = ''
      this.sellerPageChange(this.sellerParams.page)
    },
    //获取项目招标信息列表
    getSellerList () {
      SellerMarketApi.getSellList({
        params: this.sellerParams
      }).then(res => {
        this.projectTable.list = res.data.data
        this.projectTable.total_count = res.data.total
      }, err => {
        console.log(err)
      })
    },
    //项目招标信息列表分页功能
    sellerPageChange (page) {
      this.sellerParams.page = page
      this.getSellerList()
    },
    //获取查看按钮下的项目招标信息
    getSellerDialogInfo (row) {
      SellerMarketApi.getSellInfo({
        params: {
          bid_invite_id: row.bid_invite_id
        }
      }).then(res => {
        this.ruleForm.list = res.data.data
        this.ruleForm.qual_info = res.data.qual_info
        this.ruleForm.load_info = res.data.load_info
        this.ruleForm.max_amount = res.data.max_amount
      }, err => {
        console.log(err)
      })
    },
    //获取项目状态下拉框数据
    getProjcetStateList () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: "inviteBidStauts"
        }
      }).then(res => {
        this.sellerStateList = res.data.list
      }, err => {
        console.log(err)
      })
    },
    changeRadio (value) {
      if (value == '全部') {
        this.unitParams.status = ''
        this.getSellerDetailList()
      } else if (value == '已报名') {
        this.unitParams.status = '1'
        this.getSellerDetailList()
      } else if (value == "已上传标书") {
        this.unitParams.status = '2'
        this.getSellerDetailList()
      } else if (value == "已投标") {
        this.unitParams.status = '3'
        this.getSellerDetailList()
      } else if (value == "已中标") {
        this.unitParams.status = '4'
        this.getSellerDetailList()
      } else if (value == "未中标") {
        this.unitParams.status = '5'
        this.getSellerDetailList()
      }
    },
    //改变项目状态，重新渲染项目招标信息表格
    changeProjectState () {
      this.getSellerList()
    },
    //改变发布时间，重新渲染项目招标信息表格
    changeReleaseTime () {
      this.getSellerList()
    },
    //点击项目招标信息列表行,显示合同投标详情列表数据
    getRowData (row) {
      this.rowData = row
      this.rowState = row.status
      this.unitParams.bid_invite_id = row.bid_invite_id
      this.getSellerDetailList()
      // this.getAllStateList()
    },
    //获取全部状态的下拉框数据
    getAllStateList () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: "joinBidStauts"
        }
      }).then(res => {
        this.StateList = [{
          value: "",
          name: "全部"
        }]
        this.StateList = this.StateList.concat(res.data.list)
      }, err => {
        console.log(err)
      })
    },
    //获取合同投标详情列表
    getSellerDetailList () {
      SellerMarketApi.getSellDetailList({
        params: {
          bid_invite_id: this.unitParams.bid_invite_id,
          status: this.unitParams.status,
          page: this.unitParams.page,
          per_page: this.unitParams.per_page
        }
      }).then(res => {
        this.unitTable.list = res.data.data
      }, err => {
        console.log(err)
      })
    },
    // //合同投标详情列表分页功能
    // detailPageChange (page) {
    //   this.requestParam.page = page
    //   this.getSellerDetailList()
    // },
    // //改变状态，进行筛选
    // changeState () {
    //   this.getSellerDetailList()
    // },
    //获取id
    getId (row) {
      this.joinId = row.bid_join_id
      this.inviteId = row.bid_invite_id
    },
    //确定中标按钮
    sureSeller () {
      SellerMarketApi.sureSell({
        params: {
          bid_join_id: this.joinId,
          bid_invite_id: this.inviteId
        }
      }).then(res => {
        if (res.code == '1') {
          this.bidDialogVisible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.getSellerList()
          this.rowState = '2'
          this.getSellerDetailList()
        }
      }, err => {
        console.log(err)
      })
    }

  },
  created () {
    this.project_id = this.$route.query.project_id
    this.getProjcetStateList()
    this.getSellerList()
  },
  mounted () {

  }
}
</script>
<style scoped lang='scss'>
.seller-container {
  background: #ffffff;
  .seller-top {
    font-size: 16px;
    color: #1441b3;
    padding: 20px;
    border-bottom: 1px solid #d9d9d9;
  }
  .seller-table-main {
    padding: 20px;
    .seller-btn {
      margin-bottom: 20px;
      .search-input {
        width: 75%;
      }
      .search-date {
        width: 80%;
      }
    }
    .table-box {
      margin-bottom: 32px;
      .state-select {
        /deep/ .el-input__inner {
          outline: 0;
          border: 0;
          color: #909399;
          font-weight: bold;
          background: #f5f5f5;
        }
      }
    }
    .project-dialog {
      /deep/ .el-dialog {
        border-radius: 12px;
      }
      /deep/ .el-dialog__body {
        padding-top: 0px !important;
      }
      .project-company-name {
        font-size: 14px;
        color: #999;
        text-align: center;
        margin-bottom: 20px;
      }
      .project-company-title {
        text-align: center;
        font-size: 16px;
        color: #333;
        font-weight: bold;
      }
      .project-company-table {
        margin-bottom: 15px;
      }
      .project-company-footer {
        .seller-company-title {
          font-size: 14px;
          color: #333;
          font-weight: bold;
          line-height: 21px;
        }
        .content {
          font-size: 14px;
          color: #666;
          line-height: 21px;
          margin-bottom: 10px;
        }
      }
    }
  }
  .left-seller-detail {
    padding: 0 20px;
  }
  .contract-seller-detail {
    padding: 20px;
    .table-box {
      margin-bottom: 20px;
      .state-select {
        /deep/ .el-input__inner {
          outline: 0;
          border: 0;
          color: #909399;
          font-weight: bold;
          background: #f5f5f5;
        }
      }
    }
    .bid-dialog {
      /deep/ .el-dialog {
        border-radius: 12px;
        .el-dialog__title {
          font-size: 16px;
          color: #333;
        }
        .el-dialog__footer {
          text-align: center;
        }
      }
      .dialog-title {
        font-size: 16px;
        color: #333;
      }
      .dialog-content {
        line-height: 24px;
        font-size: 16px;
        color: #333;
        font-weight: bold;
      }
      .normal-span {
        font-weight: normal;
      }
    }
  }
}
</style>
